<template>
  <ElSelect v-model="data" multiple>
    <ElOption v-for="(action, actionName) in actions" :label="action.label" :value="actionName" :key="actionName" />
  </ElSelect>
</template>
<script setup lang="ts">
  import { getSeed } from '@/views/seed-dev';
  import { ElSelect, ElOption } from 'element-plus';
  import { ref, watch } from 'vue';

  const props = defineProps<{modelValue?: string, seedName: string}>()
  const emits = defineEmits(['update:modelValue'])

  const seed = getSeed(props.seedName)
  const actions = seed.actions || {}

  function getInitData() {
    if(!props.modelValue) return []

    return props.modelValue.split(',').map(e => e.trim())
  }
  const data = ref<string[]>(getInitData())

  watch([() => props.modelValue, () => props.seedName], () => data.value = getInitData())
  watch(() => data.value, () => emits('update:modelValue', data.value.join(',')))
</script>